/**
 * Sample React Native App with Zoomable Vector Graphics
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, { useRef } from 'react';
import { StatusBar, StyleSheet, useColorScheme, View, Text, PanResponder, Animated } from 'react-native';
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';


import ZoomableVector from './components/ZoomableVector';
import VectorGraphic from './components/VectorGraphic';
import { ScrollView } from 'react-native-gesture-handler';

function App() {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <AppContent />
    </SafeAreaProvider>
  );
}

// function VectorGraphic() {
//   return (
//     <View style={styles.vectorContainer}>
//       <View style={styles.circle} />
//       <View style={styles.square} />
//       <View style={styles.triangle} />
//       <View style={styles.line} />
//     </View>
//   );
// }

function AppContent() {





  return (
    <View style={styles.container}>
      <Text style={styles.title}>可缩放矢量图示例</Text>
      <Text style={styles.instructions}>使用双指缩放来查看效果</Text>

      <ZoomableVector>
        <VectorGraphic onDotPlaced={(dot: { x: number; y: number; id: number }) => console.log('点击位置：', dot)} />
      </ZoomableVector>



    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginVertical: 20,
  },
  instructions: {
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 10,
    color: '#666',
  },
  resetText: {
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 20,
    color: '#3498db',
    textDecorationLine: 'underline',
  },
  zoomContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  vectorContainer: {
    width: 200,
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
  },
  circle: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: '#3498db',
    position: 'absolute',
  },
  square: {
    width: 80,
    height: 80,
    backgroundColor: '#e74c3c',
    transform: [{ rotate: '45deg' }],
    position: 'absolute',
  },
  triangle: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderRightWidth: 50,
    borderBottomWidth: 100,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: '#2ecc71',
    position: 'absolute',
    top: 50,
  },
  line: {
    width: 150,
    height: 10,
    backgroundColor: '#f39c12',
    position: 'absolute',
    top: 150,
    borderRadius: 5,
  },
});

export default App;
